<template>
  <div class="index_box">
    <el-container class="nav_left">
      <el-aside width="200px">
        <el-row class="tac">
          <el-col :span="12">
            <el-menu
              default-active="1"
              class="el-menu-vertical-demo"
              background-color="#545c64"
              text-color="#fff"
              active-text-color="#ffd04b"
              router
            >
              <div class="tabs_left_heaer">
                <span><i class="el-icon-setting"></i>管理</span>
                <button
                  class="login-btn"
                  @click="$router.push('/login')"
                  :disabled="tokenFlag ? true : false"
                >
                  {{ tokenFlag ? "管理员" : "登录去" }}
                </button>
              </div>

              <el-menu-item
                v-for="(item, index) in list"
                :key="index"
                :index="item.path"
                active="1"
              >
                <i :class="item.meta.icon"></i>
                <span slot="title">
                  <span>{{ item.meta.title }}</span>
                </span>
              </el-menu-item>
            </el-menu>
          </el-col>
        </el-row>
      </el-aside>

      <el-container>
        <el-header class="tabs_right_header">Header</el-header>
        <router-view>
          <el-main>Main</el-main>
        </router-view>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { dynamic } from "../router/index";
import {
  mapState,
  mapActions,
  mapGetters,
  mapMutations
} from "vuex"
export default {
  data() {
    return {
      list: [],
      tokenFlag: "",
    };
  },
  created() {
    if (window.localStorage.getItem("token")) {
      dynamic.forEach((item) => {
        // homeChildrenPath.push(item)
        console.log(666666666);
        this.$router.addRoute("Home", item);
      });
    }
    this.list = this.$router
      .getRoutes()
      .filter((item) => item.meta.homeChildrenPath);
    this.tokenFlag = window.localStorage.getItem("token");
    // console.log(this.list);
    // console.log(111111);
  },
  methods: {
    tabs_left() {},
  },
};
</script>

<style lang="scss">
.index_box {
  width: 100%;
  height: 100%;
  border: 1px solid #333;
  .nav_left {
    width: 100%;
    height: 100%;
    .el-row {
      width: 100%;
      height: 100%;
      .el-col {
        width: 100%;
        height: 100%;
        .el-menu-vertical-demo {
          height: 100%;
        }
      }
    }
  }
}
.login-btn {
  padding: 3px 9px;
  background-color: aliceblue;
  border-radius: 5px;
}
.tabs_right_header {
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 18px;
  border-bottom: 1px solid #ccc;
}

.tabs_left_heaer {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0 15px;
  color: #fff;
}
</style>